<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<script type="text/javascript" src="__STATIC__/uploadify/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>
	<link href="__STATIC__/uploadify/uploadify.css" type="text/css" rel="stylesheet"></link>
	<link rel="stylesheet" type="text/css" href="__STATIC__/hdjs/hdjs.css"/>
    <script src="__STATIC__/hdjs/hdjs.min.js" type="text/javascript" charset="utf-8"></script>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>添加商品</title>
    <style type="text/css">
        .checkbox{
             margin-left:5px;
             width:90px;
             margin-top: 10px;
        }
        textarea{
            width: 300px;
            height: 100px;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="__STATIC__/hdjs/hdjs.css"/>
    <script type="text/javascript" charset="utf-8" src="__STATIC__/ueditor1_4_3/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="__STATIC__/ueditor1_4_3/ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="__STATIC__/ueditor1_4_3/lang/zh-cn/zh-cn.js"></script>
    <script type="text/javascript">
		//点击x删除图片
		$('.del-img').live('click',function(){
			var liObj = $(this).parents('li');
			//找到父级li里面的地址
			var path = liObj.attr('path');
			//发异步到服务器删除
			$.ajax({
				type:"post",
				url:"{|U:'delImg'}",
				data:{path:path},
				success:function(data){
					//移除图片
					liObj.remove();
				}
			});
		})
	</script>
</head>
<body>
<div class="wrap">
    <div class="hd-title-header">添加商品</div>
    <form action="" method="post" class="form-inline hd-form" enctype="multipart/form-data">
        <table class="hd-table hd-table-list">
            <tr>
                <th class="w100">商品名称</th>
                <td class="w100">
                    <input type="text" name="pname" class="w200" value="{$data.gname}"/> 
                </td>
                <td></td>
            </tr>
            <tr>
                <th class="w100">单位</th>
                <td>
                    <input type="text" name="gunit" class="w200" value="{$data.gunit}"/>
                </td>
                <td></td>
            </tr>
            <tr>
                <th class="w100">市场价</th>
                <td>
                    <input type="text" name="marketprice" class="w200" value="{$data.marketprice}"/>
                </td>
                <td></td>
            </tr>
            <tr>
                <th class="w100">商城价</th>
                <td>
                    <input type="text" name="shopprice" class="w200" value="{$data.shopprice}"/>
                </td>
                <td></td>
            </tr>
            <tr>
                <th class="w100">点击次数</th>
                <td>
                    <input type="text" name="click" class="w200" value="{$data.click}"/>
                </td>
                <td></td>
            </tr>
            <tr>
                <th class="w100">所属分类</th>
                <td>
                    <select name="cid" class="w200">
                        <foreach from="$category" key="$k" value="$v">
                            <option value="{$v.cid}" <if value="$data['cid']==$v['cid']">selected</if>>{$v._name}</option>
                        </foreach>
                    </select>
                </td>
                <td></td>
            </tr>
<script type="text/javascript">
$(function(){
	var ccid = {$data.cid};
	var attrr = $("#attr").clone();
	var specs = $("#spec").clone();

	$("select[name=cid]").change(function(){
		var cid = $(this).val();
		if(ccid==cid){
			$("#attr").html(attrr);
			$("#spec").html(specs);
			return;
		}
		$.ajax({
			type:"post",
			url:"{|U:('attrTypeAjax')}",
			data:{cid:cid},
			dataType:'json',
			success: function(phpData){
				//属性
				var attr = '';
				//规格
				var spec = '';
				$.each(phpData, function(k,v) {    
				//如果是属性(不可选)	
					if(v.attrtype == '属性'){
					  	attr += '<tr><td>'+v.attrname+'</td><td><select name="attrval['+v.attrid+']"><option value="0">请选择</option>';
					  	$.each(v.attrval, function(kk,vv) {    
					  		attr += '<option value="'+vv+'">' + vv + '</option>';                                                          
					  	});
					  	attr += '</select></td><td> </td></tr>';
					}else{
						spec += '<tr><td>'+v.attrname+'</td><td><select name="attrval['+v.attrid+'][val][]"><option value="0">请选择</option>';
					  	$.each(v.attrval, function(kk,vv) {    
					  		spec += '<option>' + vv + '</option>';                                                          
					  	});
					  	spec += '</select></td><td class="w100">附加价格</td><td><input type="text" name="attrval['+v.attrid+'][fuelprices][]" class="w200" value="0"/></td><td><a href="javascript:;" class="add-spec hd-btn hd-btn-primary hd-btn-xm ">添加一项</a></td></tr>';
					}
				});
				$('#attr').html(attr);
				$('#spec').html(spec);
			}
		});
	})
	//添加一个规格
	$('.add-spec').live('click', function () {
		var tr = $(this).parents('tr');
		var obj = tr.clone();
		var del = '<a class="hd-btn hd-btn-primary hd-btn-xm del-spec btn btn-info"><i class="icon-white icon-minus"></i>删除规格</a>';
		obj.find('td').eq(4).find('.add-spec').remove();
		obj.find('td').eq(4).append(del);
		tr.after(obj);
	});

	//删除一个规格
	$('.del-spec').live('click', function() {
		$(this).parents('tr').remove();
	});
})
</script>

            <tr>
                <th class="w100">所属品牌</th>
                <td>
                    <select name="bid" class="w200">
                        <foreach from="$brand" key="$k" value="$v">
                            <option value="{$v.bid}" <if value="$data['bid']==$v['bid']">selected</if> >{$v.bname}</option>
                        </foreach>
                    </select>
                </td>
                <td></td>
            </tr>
            </table>
            <div class="hd-title-header">商品属性</div>
            <table class="hd-table hd-table-list" id="attr">
            		<foreach from="$attrData" key="$k" value="$v">
            			<if value="$v['attrtype']=='属性'">
		            	<tr>
		            		<td>{$v.attrname}</td>
		            		<td>
		            			<select name="attrval[{$v.attrid}]">
		            				<foreach from="$v[attrval]" key="$kk" value="$vv">
		            					<option value="{$vv}" <if value="in_array($vv,$attr)">selected</if>>{$vv}</option>
		            				</foreach>
		            			</select>
		            		</td>
		            		<td></td>
		            	</tr>
		            	</if>
            		</foreach>
            </table>
            
            <div class="hd-title-header">商品规格</div>
            <table class="hd-table hd-table-list" id="spec">
            	<foreach from="$spec" key="$k" value="$v">
		            	<tr>
		            		<td>{$v.attrname}</td>
		            		<td>
		            			<select name="attrval[{$v.attrid}][val][]">
		            				<foreach from="$attrData" key="$kk" value="$vv">
		            					<if value="$v['attrtype']=='规格'">
			            					<if value="$vv[attrname]==$v[attrname]">
			            						<foreach from="$vv[attrval]" key="$kkk" value="$vvv">
			            						<option value="{$vvv}" <if value="$v[attrval]==$vvv">selected</if> >{$vvv}</option>
			            						</foreach>
			            					</if>
		            					</if>
		            				</foreach>
		            			</select>
		            		</td>
		            		<td class="w100">附加价格</td>
		            		<td><input type="text" name="attrval[{$v.attrid}][fuelprices][]" class="w200" value="{$v.fuelprices}"/></td>
		            		<td><a href="javascript:;" class="add-spec hd-btn hd-btn-primary hd-btn-xm ">添加一项</a></td>
		            		<td></td>
		            	</tr>
            		</foreach>
            </table>
            
            <div class="hd-title-header">列表图</div>
            <table class="hd-table hd-table-list">
            <tr>
            	<th class="w100">列表图</th>
            	<td>
            		<input id="list" type="file" multiple="true" name="list">
	            <span>类型: *.jpg,*.png </span>
	            <script type="text/javascript">
	                $(function() {
	                    $('#list').uploadify({
	                        'formData'     : {//POST数据
	                            '<?php echo session_name();?>' : '<?php echo session_id();?>',
	                        },
	                        'fileTypeDesc' : '上传文件',//上传描述
	                        'fileTypeExts' : '*.jpg;*.png',
	                        'swf'      : '__STATIC__/uploadify/uploadify.swf',
	                        'uploader' : '{|U:"uploadlist"}',
	                        'buttonText':'选择文件',
	                        'fileSizeLimit' : '2000KB',
	                        'uploadLimit' : 1,//上传文件数
	                        'width':65,
	                        'height':25,
	                        'successTimeout':10,//等待服务器响应时间
	                        'removeTimeout' : 0.2,//成功显示时间
	                        'onUploadSuccess' : function(file, data, response) {
	                            data=$.parseJSON(data);
	                            var imageUrl = data.image?data.url:'__STATIC__/image/default.png';
	                            var li="<li path='"+data.path+"' url='"+data.url+"' style='float: left'><img src='"+imageUrl+"' style='width:100px;heigth:100px;'/><a href='javascript:;'  class='del-img hd-btn hd-btn-danger hd-btn-xm'>删除</a>";
	                            //把地址放到隐藏域，这样可以提交到服务器了
	                            li += '<input type="hidden" name="listview" value="'+data.path+'"/>';
	                            li += '</li>';
	                            $("#uploadList ul").prepend(li);
	                        }
	                    });
	                });
	            </script>
	            <div id="uploadList">
	            	<ul >
	 					<li path="$data.listview" style='float: left'>
	 						<img src="__ROOT__/{$data.listview}" style='width:100px;heigth:100px;'/>
	 						<a href='javascript:;' class='del-img hd-btn hd-btn-danger hd-btn-xm'>删除</a>
	 						<input type="hidden" name="listview" value="{$data.listview}"/>
	 					</li>
	                </ul>
	            </div>
            	</td>
            </tr>
            <tr>
            	<th class="w100">商品图册</th>
            	<td>
            		<input id="pic" type="file" multiple="true" name="pic">
	            <span>类型: *.jpg,*.png 大小: 2000KB 数量: 10</span>
	            <script type="text/javascript">
	                $(function() {
	                    $('#pic').uploadify({
	                        'formData'     : {//POST数据
	                            '<?php echo session_name();?>' : '<?php echo session_id();?>',
	                        },
	                        'fileTypeDesc' : '上传文件',//上传描述
	                        'fileTypeExts' : '*.jpg;*.png',
	                        'swf'      : '__STATIC__/uploadify/uploadify.swf',
	                        'uploader' : '{|U:"upload"}',
	                        'buttonText':'选择文件',
	                        'fileSizeLimit' : '2000KB',
	                        'uploadLimit' : 1000,//上传文件数
	                        'width':65,
	                        'height':25,
	                        'successTimeout':10,//等待服务器响应时间
	                        'removeTimeout' : 0.2,//成功显示时间
	                        'onUploadSuccess' : function(file, data, response) {
	                            data=$.parseJSON(data);
	                            var imageUrl = data.image?data.url:'__STATIC__/image/default.png';
	                            var li="<li path='"+data.path+"' url='"+data.url+"' style='float: left'><img src='"+imageUrl+"' style='width:100px;heigth:100px;'/><a href='javascript:;' class='del-img hd-btn hd-btn-danger hd-btn-xm'>删除</a>";
	                            //把地址放到隐藏域，这样可以提交到服务器了
	                            li += '<input type="hidden" name="goodspic[]" value="'+data.path+'"/>';
	                            li += '</li>';
	                            $("#uploadPic ul").prepend(li);
	                        }
	                    });
	                });
	            </script>
	            <div id="uploadPic">
	            	<ul >
	            		<foreach from="$data['bigpic']" key="$k" value="$v">
	 					<li path="$v" style='float: left'>
	 						<img src="__ROOT__/{$v}" style='width:100px;heigth:100px;'/>
	 						<a href='javascript:;' class='del-img hd-btn hd-btn-danger hd-btn-xm'>删除</a>
	 						<input type="hidden" name="goodspic[]" value="{$v}"/>
	 					</li>
	 					</foreach>
	                </ul>
	            </div>
            	</td>
            	<td></td>
            </tr>
            </table>
            <table class="hd-table hd-table-list">
            <div class="hd-title-header"><a href="javascript:;" class="hd-btn hd-btn-primary hd-btn-xm serveropen">售后服务</a></div>
            <tr class="serverline" style="display: none;">
                <th class="w100">售后服务</th>
                <td>
                    <script id="ed" type="text/plain" style="width:600px;height:300px;" name="server">
                    	{$data.service}
                    </script>
                    <script>
                        var ue = UE.getEditor('ed');
                    </script>
                </td>
                <td></td>
            </tr>
            </table>
            <div class="hd-title-header"><a href="javascript:;" class="hd-btn hd-btn-primary hd-btn-xm particularopen">商品详细</a></div>
            <table class="hd-table hd-table-list">
             <tr style="display: block;" class="particular">
                <th class="w100">商品详细</th>
                <td>
                    <script id="content" type="text/plain" style="width:600px;height:300px;" name="content">{$data.commoditydetails}</script>
                    <script>
                        var ue = UE.getEditor('content');
                    </script>
                </td>
                <td></td>
            </tr>
        
        </table>
        <div class="position-bottom">
            <input type="submit" class="hd-btn hd-btn-success" value="添加"/>
        </div>
    </form>
</div>
<script type="text/javascript">
$(".serveropen").toggle(
	function(){
		$(".serverline").show();
	},
	function(){
		$(".serverline").hide();
	}
);
$(".particularopen").toggle(
	function(){
		$(".particular").hide();
	},
	function(){
		$(".particular").show();
	}
)
</script>
</body>
</html>